<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>图猫APP主页</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no" />
  <meta name="description" content="图猫,摄影,图猫APP" /> <!-- 页面描述 -->
  <meta name="keywords" content="图猫,摄影,图猫APP"/> <!-- 页面关键字 -->
  <meta name="author" content="图猫" /> <!-- 作者 -->
  <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/app.css" rel="stylesheet">
  <link href="font/iconfont.css" rel="stylesheet">
  <link href="css/animate.min.css" rel="stylesheet">
  <link href="plug/swiper/css/swiper.min.css" rel="stylesheet">
  <!--[if lte IE 9]>
	<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<script src="http://apps.bdimg.com/libs/html5shiv/r29/html5.min.js"></script>
	<![endif]-->
</head>
<body>
<div id="loader" class="loader" style="display: block;">
  <div class="load">
  <img src="img/load-logo.png" alt="load">
    <div class="load-animation">
	    <span class="load-item"><img src="img/load.png" alt="load"></span>
	    <span class="load-item load-item-revers"><img src="img/load.png" alt="load"></span>
	    <span class="load-item delay-200"><img src="img/load.png" alt="load"></span>
    </div>
  </div>
</div>
<!-- 主体 -->
<header class="header">
<nav class="navbar navbar-default tumao-nav">
  <div class="container wow fadeInDown">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">切换</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><i class="iconfont icon-logo getlogo"></i><span>图猫</span></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav pull-right">
        <!-- <li class="active"><a href="#">首页</a></li> -->
        <li class="active"><a href="#">图猫APP</a></li>
        <li><a href="#">图猫官网</a></li>
        <li><a href="#">云社区</a></li>
        <li><a href="#" class="dl-btn">登录</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>
<section class="focus">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 tit-app">
				<h1 class="wow fadeInRight">图猫超级影辑<br>你的图片专辑</h1>
				<p class="wow fadeInLeft" data-wow-delay="0.1s"><a class="down-btn" href="#" title="下载安卓版"><i class="iconfont icon-anzhuo doni"></i>安卓下载</a></p>
				<p class="wow fadeInLeft" data-wow-delay="0.2s"><a class="down-btn" href="#" title="下载IOS版"><i class="iconfont icon-iphone doni"></i>iOS敬请期待</a></p>
			</div>
			<div class="col-sm-6 tit-img hidden-xs wow fadeInLeft" data-wow-duration="1.9s" data-wow-delay="0.6s">
				<img class="center-block" src="img/focus.png">
			</div>
		</div>
	</div>
</section>
<section class="flash">
	<h2 class="deh2 wow fadeInUp">图猫 | APP 轻松实现图片聚合 </h2>
	<p class="dep wow fadeInUp" data-wow-delay="0.2s">强大的研发团队，致力图像聚合分享，一键生成MV，让你的图片实现最大价值</p>
	<div class="autoflash container">
		<div class="row">
			<div class="col-sm-4 swcrl hidden-xs wow fadeInLeft">
				<ul>
				<div class="ulbefore"></div>
					<li class="active" data-index="0"><a href="javascript:;"><i class="iconfont icon-weibiaoti1 logi"></i>创建话题</a></li>
					<li data-index="1"><a href="javascript:;"><i class="iconfont icon-picture logi"></i>收集图片</a></li>
					<li data-index="2"><a href="javascript:;"><i class="iconfont icon-trophy logi"></i>为好图发奖</a></li>
					<li data-index="3"><a href="javascript:;"><i class="iconfont icon-mv logi"></i>生成MV</a></li>
					<li data-index="4"><a href="javascript:;"><i class="iconfont icon-share logi"></i>分享朋友</a></li>
				</ul>
			</div>
			<div class="col-sm-8 swper-con wow fadeInRight" data-wow-delay="0.3s">
    <!-- Swiper -->
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide">
									<p><img class="center-block" src="img/cu-1.jpg"></p>
									<h3 class="wp-tit">创建话题</h3>
									<p class="wp-p">当您需要任何图片，或者对任何类型影像有兴趣，都可以在APP中发起话题，向上亿网友征集相关图片，迅速挑选自己需要的图片。</p>
		            </div>
		            <div class="swiper-slide">
									<p><img class="center-block" src="img/cu-2.jpg"></p>
									<h3 class="wp-tit">收集图片</h3>
									<p class="wp-p">将手机中的符合话题的图片直接上传到图猫APP，参与话题，与更多网友互动，同时也可以轻松创建自己的个人影集。</p>
		            </div>
		            <div class="swiper-slide">
									<p><img class="center-block" src="img/cu-3.jpg"></p>
									<h3 class="wp-tit">为好友发奖</h3>
									<p class="wp-p">对于话题中被选中的优秀图片，您可以通过发红包的方式对作者进行奖励，聚集更多人气。</p>
		            </div>
		            <div class="swiper-slide">
									<p><img class="center-block" src="img/cu-4.jpg"></p>
									<h3 class="wp-tit">生成MV</h3>
									<p class="wp-p">您发起话题中收集到的优秀图片，可以通过图猫APP一键生成MV，制作自己的音乐影像专辑。</p>
		            </div>
		            <div class="swiper-slide">
									<p><img class="center-block" src="img/cu-4.jpg"></p>
									<h3 class="wp-tit">分享朋友</h3>
									<p class="wp-p">将制作完成的MV，一键分享朋友圈，炫出你的精彩。</p>
		            </div>
		        </div>
		    </div>
			</div>
		</div>
	</div>
</section>

<section class="view">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 hidden-xs wow fadeInLeft">
				<img class="center-block" src="img/phone-1.png">
			</div>
			<div class="col-sm-6 view-p wow fadeInRight">
				<h3>汇集在一起的时光</h3>
				<p>相聚的每寸时光都是珍贵的<br>
					每一张影像都值得数次回味<br>
					将图片上传图猫APP,<br>
				留住相聚的美好时光</p>
				<p><img src="img/pro-1.png"></p>
			</div>
		</div>
	</div>
</section>
<section class="view v-left">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 view-p wow fadeInLeft">
				<h3>制作你的专属MV</h3>
				<p>发布兴趣话题<br>
					收藏喜欢<br>
					一键生成MV<br>
					分享到您的朋友圈</p>
				<p><img src="img/pro-2.png"></p>
			</div>
			<div class="col-sm-6 hidden-xs wow fadeInRight">
				<img class="center-block" src="img/phone-2.png">
			</div>
		</div>
	</div>
</section>
<section class="view">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 hidden-xs wow fadeInLeft">
				<img class="center-block" src="img/phone-3.png">
			</div>
			<div class="col-sm-6 view-p wow fadeInRight">
				<h3>轻松获得奖励红包</h3>
				<p>参与话题内容 <br>
					上传优质图片<br>
					领取题主红包<br>
					获益就是这么简单</p>
				<p><img src="img/pro-3.png"></p>
			</div>
		</div>
	</div>
</section>
<section class="view video-o">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 view-p wow fadeInUp">
				<h3>操作视频</h3>
				<p>简单易懂的图猫APP操作指南，请确保您有基础的智能手机操作技能</p>
				<video id="video" class="logvideo" poster="img/defvido.jpg" autobuffer>
					 <source src="video/app.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
				</video>
			</div>
		</div>
	</div>
</section>

<section class="downapp">
<div class="container">
	<div class="row">
		<div class="col-sm-4 hb-l wow fadeInLeft">
			<h3>轻松获得奖励红包</h3>
			<p>如此好玩的APP，还不赶紧下载吗？</p>
			<img src="img/androddownflot.png">
		</div>
		<div class="col-sm-8 hidden-xs wow fadeInRight">
			<img class="center-block " src="img/phone-on.jpg">
		</div>
	</div>
</div>
</section>
<section class="aboutus">
<div class="container">
	<h2 class="wow fadeInUp">关于我们</h2>
	<p class="wow fadeInUp" data-wow-delay="0.3s">图猫团队从事摄影行业多年，一直致力于发现影像价值，推动影像圈走进互联网+时代。图猫APP是图猫团队倾力打造的图片移动端聚合工具，
它将零散的图片聚集，使其产生更大的价值，提供更好玩的图片社交场景。</p>
</div>
</section>


<footer class="footer">
	<div class="container">
		<h1 class="f-tit wow fadeInUp">联系我们</h1>
<!-- 		<div class="row">
			<div class="col-sm-6 line-us wow fadeInLeft">
				<h4>深圳市亮点视创文化有限公司</h4>
				<p>公司地点：深圳市福田区北环大道雕塑家园18-34A <br><br>

						· 了解产品或商业合作，<br>请于工作时间联系［图猫深圳新媒体中心］市场部<br>
						电话：0755-83979786 / 61669015 / 61669025<br>

						· 产品技术支援与客户服务，<br>请于工作时间联系［图猫北京开发中心］客服部<br>
						电话：010-50912866
						</p>
				<span class="share">
					<div class="bdsharebuttonbox" data-tag="share_1">
						<a class="iconfont icon-weixin" data-cmd="weixin" title="分享到您的朋友圈"></a>
						<a class="iconfont icon-weibo" data-cmd="tsina" title="分享到微博"></a>
						<a class="iconfont icon-qq" data-cmd="sqq" title="分享给QQ好友"></a>
					</div>
				</span>
			</div>
			<div class="col-sm-6 line-form wow fadeInRight">
					<input type="text" class="form-control" placeholder="姓名">
					<input type="text" class="form-control" placeholder="邮箱">
					<input type="text" class="form-control" placeholder="电话">
					<textarea  class="form-control" rows="4" placeholder="内容"></textarea>
					<button type="button" class="btn btn-primary line-btn">提交</button>
			</div>
		</div> -->
		<div class="row">
			<div class="col-sm-12 line-us wow fadeInLeft text-center">
				<h4>深圳市亮点视创文化有限公司</h4>
				<p>公司地点：深圳市福田区北环大道雕塑家园18-34A </p>
				<div class="row">
					<div class="col-sm-6 text-right">
						<p>· 了解产品或商业合作 · <br>请于工作时间联系［图猫深圳新媒体中心］市场部<br>
						电话：0755-83979786 / 61669015 / 61669025</p>
					</div>
					<div class="col-sm-6  text-left">
						 <p>· 产品技术支援与客户服务 · <br>请于工作时间联系［图猫北京开发中心］客服部<br>
						电话：010-50912866
						</p>
					</div>
				</div>
				<span class="share center-block">
					<div class="bdsharebuttonbox" data-tag="share_1">
						<a class="iconfont icon-weixin" data-cmd="weixin" title="分享到您的朋友圈"></a>
						<a class="iconfont icon-weibo" data-cmd="tsina" title="分享到微博"></a>
						<a class="iconfont icon-qq" data-cmd="sqq" title="分享给QQ好友"></a>
					</div>
				</span>
			</div>
		</div>



	</div>
	<div class="cic">
		<div class="container">
			<span class="pull-right">COPYRIGHT © 2012-2015 图猫  京ICP证080268号</span>
		</div>
	</div>
</footer>
<!-- 浮窗 -->
<div class="floaterwm hidden-xs">
	<img src="img/androddownflot.png">
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="plug/swiper/js/swiper.jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});

document.documentElement.style.overflow='hidden';
// lodader
$(window).on('load', function () {
    if(document.readyState=='complete'){
 	  document.getElementById('loader').style.display = 'none';
		wow.init();
		document.documentElement.style.overflow='auto';
	}
});

// swiper
var swiper = new Swiper('.swiper-container', {
	autoplay : 4000,
	speed:500,
	grabCursor : true,
	onSlideChangeStart: function(swiper){
    autoactive(swiper.activeIndex);
  }
});
// 指定切换的位置
function slidto(id){
	swiper.slideTo(id, 600, false);
}
// 点击获取位置
$('.swcrl li').on('mouseover',function(){
	var ins = $(this).attr('data-index');
	slidto(ins);
	$(this).addClass('active').siblings().removeClass('active');
	$('.swcrl .ulbefore').css('top',ins*(102)+'px');
});
// 自动切换
function autoactive(index){
	$('.swcrl li[data-index="'+index+'"]').addClass('active').siblings().removeClass('active');
	$('.swcrl .ulbefore').css('top',index*(102)+'px');
}

// 操作
$('.floaterwm').hide();
$(window).scroll(function(){
	if($(window).scrollTop()>600){
		$('.floaterwm').show(500);
	}
});
$('.floaterwm').on('click',function(){
	$(this).css('visibility','hidden');
});

// 播放视频
$('.logvideo').on('click',function(){
	var Media = document.getElementById("video");
	if(Media.paused){
			$(this).trigger('play');
			$(this).prop('controls',true);
		}else{
			$(this).trigger('pause');
			$(this).prop('controls',false);
		}
});

</script>

<script>
var http = window.location.href;
var vi = /^.+[\/]/i;
var url = http.match(vi);
	//百度分享
	window._bd_share_config = {
		common : {
			bdText : '#图猫APP#',
			bdDesc : '图猫团队从事摄影行业多年，一直致力于发现影像价值，推动影像圈走进互联网+时代...',
			bdUrl : http,
			bdPic : url + 'img/defvido.jpg'
		},
		share : [{
			"tag" : "share_1",
			"bdSize" : 24
		}]
	}
	with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
</body>
</html>